<template>
	<div v-if="pageShow" style="min-height: 120vh">
		<topNavigation :linkMsg="linkMsg"></topNavigation>
		<div style="display: flex; justify-content: center; width: 100vw">
			<el-row style="width: 85vw; margin-top: 2vh">
				<el-col :span="24" style="position: relative">
					<div
						style="
							display: flex;
							align-items: center;
							position: absolute;
							top: -10px;
							left: 70px;
						"
					>
						<div>
							<el-image
								:src="userData.avatar"
								fit="fill"
								style="
									width: 100px;
									height: 100px;
									border-radius: 50%;
								"
							></el-image>
						</div>
						<div style="margin-left: 2vw">
							<el-text
								type="primary"
								style="font-weight: bold; font-size: 30px"
							>
								<el-icon>
									<UserFilled />
								</el-icon>
								{{ userData.nickname }}
							</el-text>
						</div>
						<div style="margin-left: 50vw">
							<el-text style="font-size: 20px">
								<el-icon>
									<Clock />
								</el-icon>
								站龄
								{{
									dateStore.getDaysBetweenDates(
										new Date(),
										JSON.parse(userData.registdate)
									)
								}}
								天
							</el-text>
						</div>
					</div>
					<el-card shadow="always" style="height: 120px"> </el-card>
				</el-col>
			</el-row>
		</div>
		<div style="display: flex; justify-content: center; margin-top: 5vh">
			<el-row style="width: 85vw">
				<el-col :span="24" :offset="0">
					<el-radio-group
						v-model="radioOption"
						size="large"
						style="width: 100%"
					>
						<el-radio-button label="我的关注" value="我的关注" />
						<el-radio-button label="我的粉丝" value="我的粉丝" />
					</el-radio-group>
				</el-col>
			</el-row>
		</div>
		<div style="display: flex; justify-content: center">
			<div style="width: 85vw">
				<el-row>
					<el-col :span="6" v-if="radioOption === '我的关注'">
						<el-card
							shadow="hover"
							style="width: 100%; min-height: 120px"
						>
							<div
								style="
									display: flex;
									flex-direction: column;
									width: 100%;
								"
								v-if="followMsgList.length !== 0"
							>
								<el-row
									style="width: 100%; margin: 1vh 0"
									v-for="(item, index) in followMsgList"
									:key="index"
									v-show="followShow"
								>
									<el-col
										:span="24"
										style="
											display: flex;
											align-items: center;
										"
									>
										<div>
											<el-image
												class="hvr-grow"
												@click="showUserMsg(item)"
												:src="item.avatar"
												fit="fill"
												style="
													width: 50px;
													height: 50px;
													border-radius: 50%;
												"
											></el-image>
										</div>
										<div style="margin-left: 1vw">
											<el-text>
												{{ item.nickname }}
											</el-text>
										</div>
										<div style="margin-left: 6.5vw">
											<el-button
												style="width: 5vw"
												:type="
													followBtnStyle[index].type
												"
												plain
												@click="
													followChange(
														followList[index],
														index,
														item.username
													)
												"
												>{{
													followBtnStyle[index].text
												}}</el-button
											>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col
										:span="24"
										style="
											display: flex;
											justify-content: center;
											margin-top: 10vh;
										"
									>
										<el-pagination
											v-model:current-page="
												followCurrentPage
											"
											background
											@update:current-page="
												updateFollowPage
											"
											:page-size="10"
											layout="prev, pager, next"
											:total="followTotal"
										/>
									</el-col>
								</el-row>
							</div>
							<div
								v-else
								style="
									display: flex;
									flex-direction: column;
									width: 100%;
								"
							>
								<el-col :span="24">
									<el-alert
										style="height: 80px"
										title="Warning"
										type="warning"
										description="您还没有关注过其他人哦"
										show-icon
										:closable="false"
									/>
								</el-col>
							</div>
						</el-card>
					</el-col>
					<!-- v-else -->
					<el-col :span="6" v-else>
						<el-card shadow="hover" style="width: 100%">
							<div
								style="
									display: flex;
									flex-direction: column;
									width: 100%;
								"
								v-if="fansMsgList.length !== 0"
							>
								<el-row
									style="width: 100%; margin: 1vh 0"
									v-for="(item, index) in fansMsgList"
									:key="index"
									v-show="fansShow"
								>
									<el-col
										:span="24"
										style="
											display: flex;
											align-items: center;
										"
									>
										<div>
											<el-image
												:src="item.avatar"
												fit="fill"
												style="
													width: 50px;
													height: 50px;
													border-radius: 50%;
												"
											></el-image>
										</div>
										<div style="margin-left: 1vw">
											<el-text>
												{{ item.nickname }}
											</el-text>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col
										:span="24"
										style="
											display: flex;
											justify-content: center;
											margin-top: 10vh;
										"
									>
										<el-pagination
											v-model:current-page="
												fansCurrentPage
											"
											background
											@update:current-page="
												updateFansPage
											"
											:page-size="10"
											layout="prev, pager, next"
											:total="fansTotal"
										/>
									</el-col>
								</el-row>
							</div>
							<div
								v-else
								style="
									display: flex;
									flex-direction: column;
									width: 100%;
								"
							>
								<el-col :span="24">
									<el-alert
										style="height: 80px"
										title="Warning"
										type="warning"
										description="您还没有粉丝哦"
										show-icon
										:closable="false"
									/>
								</el-col>
							</div>
						</el-card>
					</el-col>
					<el-col :span="1" :offset="2">
						<div
							style="
								height: 100%;
								width: 1px;
								background-color: #66ccff;
								box-shadow: 0 0 2px tomato;
							"
						></div>
					</el-col>
					<el-col :span="14" :offset="1">
						<el-card
							shadow="hover"
							v-if="
								followUserMsg !== null &&
								followUserMsg.userData &&
								followUserMsg.userBlogData
							"
							v-loading="loading"
						>
							<el-row>
								<el-col
									:span="24"
									style="
										display: flex;
										align-items: center;
										flex-direction: column;
									"
								>
									<div>
										<el-image
											:src="followUserMsg.userData.avatar"
											fit="fill"
											style="
												width: 80px;
												height: 80px;
												border-radius: 50%;
											"
										></el-image>
									</div>
									<div style="margin-top: 1vh">
										<el-text style="font-weight: bold">
											{{
												followUserMsg.userData.nickname
											}}
										</el-text>
									</div>
									<div style="margin-top: 2vh; width: 65px">
										<el-text type="primary">
											<typeWriter
												:msg="
													followUserMsg.userData.notes
												"
											></typeWriter>
										</el-text>
									</div>
									<div style="margin-top: 4vh">
										<div>
											<el-text>
												<el-icon>
													<Comment />
												</el-icon>
												他发布了{{
													followUserMsg.userBlogLength
												}}篇博客
												<el-icon
													class="hvr-sink"
													@click="
														followUserBlogShow =
															!followUserBlogShow
													"
												>
													<ArrowDown />
												</el-icon>
											</el-text>
										</div>
									</div>
									<div
										style="margin-top: 3vh; width: 100%"
										v-if="followUserBlogShow"
										v-loading="followUserBlogLoading"
									>
										<div
											v-for="item in followUserMsg.userBlogData"
											style="margin: 1vh 0"
										>
											<el-card
												@click="
													pushBlog(
														item.id,
														item.uploader
													)
												"
												class="hvr-shrink"
												style="
													width: 100%;
													position: relative;
												"
												shadow="never"
											>
												<div
													style="
														position: absolute;
														top: 0;
														left: 0;
														width: 100%;
													"
												>
													<el-image
														:src="item.cover"
														fit="cover"
														style="
															width: 100%;
															opacity: 0.5;
														"
													></el-image>
												</div>
												<el-row>
													<el-col :span="6">
														<div>
															<el-text
																type="danger"
																truncated
																style="
																	font-weight: bold;
																"
															>
																{{ item.title }}
															</el-text>
														</div>
													</el-col>
													<el-col
														:offset="17"
														:span="1"
													>
														<el-icon>
															<ArrowRight />
														</el-icon>
													</el-col>
												</el-row>
											</el-card>
										</div>
										<div
											style="
												margin: 3vh 0;
												width: 100%;
												display: flex;
												justify-content: center;
											"
										>
											<el-pagination
												v-model:current-page="
													followUserBlogPageCurrent
												"
												background
												@update:current-page="
													updateFollowUserBlogPage
												"
												:page-size="6"
												layout="prev, pager, next"
												:total="
													followUserMsg.userBlogLength
												"
											/>
										</div>
									</div>
								</el-col>
							</el-row>
						</el-card>
						<el-card shadow="hover" v-else>
							<el-row>
								<el-col
									:span="24"
									style="
										height: 200px;
										display: flex;
										justify-content: center;
									"
								>
									<el-alert
										title="Info"
										type="info"
										description="点击关注用户头像可查看他的相关信息哦！"
										show-icon
										center
										:closable="false"
									/>
								</el-col>
							</el-row>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
	<div v-else>
		<div style="display: flex; justify-content: center; width: 100vw">
			<el-skeleton
				:rows="20"
				animated
				style="width: 85vw; height: 90vh; margin-top: 10vh"
			/>
		</div>
	</div>
	<div>
		<pageFooter></pageFooter>
	</div>
</template>

<script setup>
import { onBeforeMount, ref, watch } from 'vue';
import topNavigation from '../components/topNavigation.vue';
import pageFooter from '../components/pageFooter.vue';
import { useRouter } from 'vue-router';
import {
	UserFilled,
	Clock,
	Comment,
	StarFilled,
	ArrowDown,
	ArrowRight,
} from '@element-plus/icons-vue';
import axios from 'axios';
import { date } from '../store/date.js';
import getFile from '../utils/getAssetsFile.js';
const router = useRouter();
const dateStore = date();

const pageShow = ref(false);
const userData = ref(null);
const radioOption = ref('我的关注');
const followList = ref(null);
const fansList = ref(null);
const followTotal = ref(0);
const fansTotal = ref(0);
const followMsgList = ref([]);
const fansMsgList = ref([]);
const followBtnStyle = ref([]);
const followCurrentPage = ref(1);
const fansCurrentPage = ref(1);
const followShow = ref(true);
const fansShow = ref(true);
const followUserMsg = ref(null);
const loading = ref(false);
const followUserBlogShow = ref(false);
const followUserBlogLoading = ref(true);
const followUserBlogPageCurrent = ref(1);

watch(followUserBlogShow, () => {
	if (followUserBlogShow.value) {
		setTimeout(() => {
			followUserBlogLoading.value = false;
		}, 500);
	} else {
		followUserBlogLoading.value = true;
	}
});

const pushBlog = (blogId, uploader) => {
	router.push({ path: '/blogPage', query: { blogId, uploader } });
};

const updateFollowUserBlogPage = async (pageNum) => {
	if (pageNum) {
		followUserBlogLoading.value = true;

		//获取关注的博客的分页查询的数据
		try {
			//followUserBlogPageData
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserPageBlog',
				method: 'post',
				data: {
					uploader: followUserMsg.value.userData.username,
					limit: 6,
					offset: (pageNum - 1) * 6,
				},
			});
			if (res.data.state === 'error') {
				ElNotification({
					title: 'Error',
					message: '服务器错误',
					type: 'error',
				});
			} else {
				followUserMsg.value.userBlogData = res.data.data;
			}
		} catch (error) {
			console.log(error);
			ElNotification({
				title: 'Error',
				message: '查询失败，请检查本地网络',
				type: 'error',
			});
		}
		setTimeout(() => {
			followUserBlogLoading.value = false;
		}, 500);
	}
};

const showUserMsg = async (userMsg) => {
	if (userMsg) {
		loading.value = true;

		//获取关注的博客的分页查询的数据
		try {
			//followUserBlogPageData
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserPageBlog',
				method: 'post',
				data: {
					uploader: userMsg.username,
					limit: 6,
					offset: 0,
				},
			});
			if (res.data.state === 'error') {
				ElNotification({
					title: 'Error',
					message: '服务器错误',
					type: 'error',
				});
			} else {
				followUserMsg.value = {
					userBlogData: res.data.data,
				};
			}
		} catch (error) {
			console.log(error);
			ElNotification({
				title: 'Error',
				message: '查询失败，请检查本地网络',
				type: 'error',
			});
		}
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserBlog',
				method: 'post',
				data: {
					uploader: userMsg.username,
				},
			});
			if (res.data.state === 'error') {
				ElNotification({
					title: 'Error',
					message: '服务器错误',
					type: 'error',
				});
			} else {
				followUserMsg.value.userData = userMsg;
				followUserMsg.value.userBlogLength = res.data.data.length;
				setTimeout(() => {
					loading.value = false;
				}, 500);
			}
		} catch (error) {
			console.log(error);
			return ElNotification({
				title: 'Error',
				message: '查询失败，请检查本地网络',
				type: 'error',
			});
		}
	}
};

const updateFansPage = async (pageNum) => {
	fansShow.value = false;
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserBeingFollow',
			method: 'post',
			data: {
				limit: 10,
				offset: (pageNum - 1) * 10,
				userType: localStorage.getItem('usertype'),
				id: Number(localStorage.getItem('id')),
			},
		});
		if (res.data.state === 'error') {
			return ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			fansList.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		return ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	try {
		fansMsgList.value = [];
		for (let item of fansList.value) {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserMsg',
				method: 'post',
				data: {
					username: item.username,
					state: 'basedUsername',
				},
			});
			if (res.data.state === 'error') {
				continue;
			} else {
				if (res.data.data) {
					if (
						!res.data.data.nickname ||
						res.data.data.nickname === 'null'
					) {
						res.data.data.nickname = `新用户${res.data.data.id}号`;
					}
					if (
						!res.data.data.avatar ||
						res.data.data.avatar === 'null'
					) {
						res.data.data.avatar = getFile.getAssetsFile(
							'img',
							'未登录头像.png'
						);
					}
					if (
						!res.data.data.notes ||
						res.data.data.notes === 'null'
					) {
						res.data.data.notes = '这个人很懒...';
					}
					if (
						!res.data.data.gender ||
						res.data.data.gender === 'null'
					) {
						res.data.data.gender = '保密';
					}

					fansMsgList.value.push(res.data.data);
				}
			}
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	fansShow.value = true;
};

const updateFollowPage = async (pageNum) => {
	followShow.value = false;
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserFollow',
			method: 'post',
			data: {
				limit: 10,
				offset: (pageNum - 1) * 10,
				username: localStorage.getItem('username'),
			},
		});
		if (res.data.state === 'error') {
			return ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			followList.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		return ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	try {
		followMsgList.value = [];
		for (let item of followList.value) {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserMsgById',
				method: 'post',
				data: {
					id: item.userId,
					userType: item.userType,
				},
			});
			if (res.data.state === 'error') {
				continue;
			} else {
				if (res.data.data.length !== 0) {
					if (
						!res.data.data[0].nickname ||
						res.data.data[0].nickname === 'null'
					) {
						res.data.data[0].nickname = `新用户${res.data.data[0].id}号`;
					}
					if (
						!res.data.data[0].avatar ||
						res.data.data[0].avatar === 'null'
					) {
						res.data.data[0].avatar = getFile.getAssetsFile(
							'img',
							'未登录头像.png'
						);
					}
					if (
						!res.data.data[0].notes ||
						res.data.data[0].notes === 'null'
					) {
						res.data.data[0].notes = '这个人很懒...';
					}
					if (
						!res.data.data[0].gender ||
						res.data.data[0].gender === 'null'
					) {
						res.data.data[0].gender = '保密';
					}

					followMsgList.value.push(res.data.data[0]);
				}
			}
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	followShow.value = true;
};

const followChange = async (followUserData, index, followUsername) => {
	if (followUserData) {
		if (followBtnStyle.value[index].text === '取消关注') {
			try {
				const res = await axios({
					baseURL: 'http://localhost:5000',
					url: '/cancelUserFollow',
					method: 'post',
					data: {
						followmsgobj: followUserData,
						username: localStorage.getItem('username'),
					},
				});
				if (res.data.state === 'error') {
					return ElNotification({
						title: 'Error',
						message: '服务器错误',
						type: 'error',
					});
				} else {
					followBtnStyle.value[index].type = 'success';
					followBtnStyle.value[index].text = '关注';
					return ElNotification({
						title: 'Success',
						message: '取消关注成功',
						type: 'success',
					});
				}
			} catch (error) {
				if (error) {
					console.log(error);
					return ElNotification({
						title: 'Error',
						message: '请检查本地网络',
						type: 'error',
					});
				}
			}
		} else {
			if (followUsername) {
				try {
					const res = await axios({
						baseURL: 'http://localhost:5000',
						url: '/addUserFollow',
						method: 'post',
						data: {
							username: followUsername,
							myusername: localStorage.getItem('username'),
						},
					});
					if (res.data.state === 'error') {
						return ElNotification({
							title: 'Error',
							message: '服务器错误',
							type: 'error',
						});
					} else {
						followBtnStyle.value[index].type = 'danger';
						followBtnStyle.value[index].text = '取消关注';
						return ElNotification({
							title: 'Success',
							message: '关注成功',
							type: 'success',
						});
					}
				} catch (error) {
					console.log(error);
					return ElNotification({
						title: 'Error',
						message: '请检查本地网络',
						type: 'error',
					});
				}
			}
		}
	} else {
		return ElNotification({
			title: 'Error',
			message: '操作失败',
			type: 'error',
		});
	}
};

onBeforeMount(async () => {
	let username = localStorage.getItem('username');
	if (!username) {
		ElNotification({
			title: 'Warning',
			message: '您还没有登录哦',
			type: 'warning',
		});
		setTimeout(() => {
			router.push('/login');
		}, 2000);
		return;
	}
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserMsg',
			method: 'post',
			data: {
				state: 'basedUsername',
				username,
			},
		});
		if (res.data.state === 'error') {
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			userData.value = res.data.data;
			if (
				!userData.value.nickname ||
				userData.value.nickname === 'null'
			) {
				userData.value.nickname = `新用户${userData.value.id}号`;
			}
			if (!userData.value.avatar || userData.value.avatar === 'null') {
				userData.value.avatar = getFile.getAssetsFile(
					'img',
					'未登录头像.png'
				);
			}
			if (!userData.value.notes || userData.value.notes === 'null') {
				userData.value.notes = '这个人很懒...';
			}
			if (!userData.value.gender || userData.value.gender === 'null') {
				userData.value.gender = '保密';
			}
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	//获取关注列表长度
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserFollowTotal',
			method: 'post',
			data: {
				username,
			},
		});
		if (res.data.state === 'error') {
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			followTotal.value = res.data.total;
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	//获取粉丝列表长度
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserBeingFollowTotal',
			method: 'post',
			data: {
				userType: localStorage.getItem('usertype'),
				id: Number(localStorage.getItem('id')),
			},
		});
		if (res.data.state === 'error') {
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			fansTotal.value = res.data.total;
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserFollow',
			method: 'post',
			data: {
				username,
				limit: 10,
				offset: 0,
			},
		});
		if (res.data.state === 'error') {
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			followList.value = res.data.data;
			for (let item of followList.value) {
				followBtnStyle.value.push({
					type: 'danger',
					text: '取消关注',
				});
			}
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserBeingFollow',
			method: 'post',
			data: {
				userType: localStorage.getItem('usertype'),
				id: Number(localStorage.getItem('id')),
				limit: 10,
				offset: 0,
			},
		});
		if (res.data.state === 'error') {
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			fansList.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	try {
		for (let item of followList.value) {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserMsgById',
				method: 'post',
				data: {
					id: item.userId,
					userType: item.userType,
				},
			});
			if (res.data.state === 'error') {
				continue;
			} else {
				if (res.data.data.length !== 0) {
					if (
						!res.data.data[0].nickname ||
						res.data.data[0].nickname === 'null'
					) {
						res.data.data[0].nickname = `新用户${res.data.data[0].id}号`;
					}
					if (
						!res.data.data[0].avatar ||
						res.data.data[0].avatar === 'null'
					) {
						res.data.data[0].avatar = getFile.getAssetsFile(
							'img',
							'未登录头像.png'
						);
					}
					if (
						!res.data.data[0].notes ||
						res.data.data[0].notes === 'null'
					) {
						res.data.data[0].notes = '这个人很懒...';
					}
					if (
						!res.data.data[0].gender ||
						res.data.data[0].gender === 'null'
					) {
						res.data.data[0].gender = '保密';
					}
					followMsgList.value.push(res.data.data[0]);
				}
			}
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	try {
		for (let item of fansList.value) {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserMsg',
				method: 'post',
				data: {
					state: 'basedUsername',
					username: item.username,
				},
			});
			if (res.data.state === 'error') {
				continue;
			} else {
				if (res.data.data.length !== 0) {
					if (
						!res.data.data.nickname ||
						res.data.data.nickname === 'null'
					) {
						res.data.data.nickname = `新用户${res.data.data.id}号`;
					}
					if (
						!res.data.data.avatar ||
						res.data.data.avatar === 'null'
					) {
						res.data.data.avatar = getFile.getAssetsFile(
							'img',
							'未登录头像.png'
						);
					}
					if (
						!res.data.data.notes ||
						res.data.data.notes === 'null'
					) {
						res.data.data.notes = '这个人很懒...';
					}
					if (
						!res.data.data.gender ||
						res.data.data.gender === 'null'
					) {
						res.data.data.gender = '保密';
					}
					fansMsgList.value.push(res.data.data);
				}
			}
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}

	pageShow.value = true;
});

const linkMsg = ref([
	{
		linkName: '文章',
		linkMethod: () => {
			router.push('/article');
		},
	},
	{
		linkName: '留言板',
		linkMethod: () => {
			router.push('/board');
		},
	},
	{
		linkName: '我的',
		linkMethod: () => {
			router.push('/aboutMe');
		},
	},
]);
</script>

<style scoped></style>
